<template>
  <div class="recruitment-container">
    <a-card title="招聘管理">
      <template #extra>
        <a-button type="primary" @click="showAddModal">发布职位</a-button>
      </template>

      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane key="1" tab="职位管理">
          <a-table
              :columns="positionColumns"
              :data-source="positionData"
              :pagination="pagination"
              row-key="id"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'status'">
                <a-tag :color="record.status === 1 ? 'green' : record.status === 2 ? 'orange' : 'red'">
                  {{ getStatusText(record.status) }}
                </a-tag>
              </template>
              <template v-if="column.key === 'action'">
                <a-space>
                  <a-button size="small" @click="viewPosition(record)">查看</a-button>
                  <a-button size="small" @click="editPosition(record)">编辑</a-button>
                  <a-button size="small" danger @click="confirmClose(record)" v-if="record.status !== 3">关闭</a-button>
                </a-space>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="候选人管理">
          <div class="search-bar">
            <a-input-search
                v-model:value="candidateSearch"
                placeholder="输入候选人姓名搜索"
                @search="handleCandidateSearch"
                style="width: 300px"
            />
          </div>
          <a-table
              :columns="candidateColumns"
              :data-source="candidateData"
              :pagination="candidatePagination"
              row-key="id"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'status'">
                <a-tag :color="getCandidateStatusColor(record.status)">
                  {{ getCandidateStatusText(record.status) }}
                </a-tag>
              </template>
              <template v-if="column.key === 'action'">
                <a-space>
                  <a-button size="small" @click="viewCandidate(record)">详情</a-button>
                  <a-button size="small" type="primary" @click="scheduleInterview(record)">安排面试</a-button>
                </a-space>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>

      <!-- 发布职位模态框 -->
      <a-modal
          v-model:visible="positionModalVisible"
          :title="modalTitle"
          @ok="handlePositionSubmit"
          @cancel="handlePositionCancel"
      >
        <a-form
            :model="positionFormState"
            :rules="positionFormRules"
            ref="positionFormRef"
        >
          <a-form-item label="职位名称" name="title">
            <a-input v-model:value="positionFormState.title" />
          </a-form-item>
          <a-form-item label="所属部门" name="department">
            <a-select v-model:value="positionFormState.department">
              <a-select-option value="技术部">技术部</a-select-option>
              <a-select-option value="产品部">产品部</a-select-option>
              <a-select-option value="市场部">市场部</a-select-option>
              <a-select-option value="财务部">财务部</a-select-option>
              <a-select-option value="人力资源部">人力资源部</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="招聘人数" name="count">
            <a-input-number v-model:value="positionFormState.count" :min="1" style="width: 100%" />
          </a-form-item>
          <a-form-item label="职位描述" name="description">
            <a-textarea v-model:value="positionFormState.description" :rows="4" />
          </a-form-item>
          <a-form-item label="职位要求" name="requirements">
            <a-textarea v-model:value="positionFormState.requirements" :rows="4" />
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message, Modal } from 'ant-design-vue'

const activeTab = ref('1')
const candidateSearch = ref('')

// 职位表格列配置
const positionColumns = [
  {
    title: '职位名称',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '所属部门',
    dataIndex: 'department',
    key: 'department'
  },
  {
    title: '招聘人数',
    dataIndex: 'count',
    key: 'count'
  },
  {
    title: '已招人数',
    dataIndex: 'hired',
    key: 'hired'
  },
  {
    title: '发布时间',
    dataIndex: 'publishDate',
    key: 'publishDate'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作',
    key: 'action',
    width: '220px'
  }
]

// 职位数据
const positionData = ref([
  { id: 1, title: '前端开发工程师', department: '技术部', count: 3, hired: 2, publishDate: '2023-09-15', status: 1 },
  { id: 2, title: '产品经理', department: '产品部', count: 2, hired: 1, publishDate: '2023-09-20', status: 1 },
  { id: 3, title: '市场专员', department: '市场部', count: 2, hired: 0, publishDate: '2023-10-05', status: 2 },
  { id: 4, title: '会计', department: '财务部', count: 1, hired: 1, publishDate: '2023-08-10', status: 3 }
])

const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 4
})

// 候选人表格列配置
const candidateColumns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '应聘职位',
    dataIndex: 'position',
    key: 'position'
  },
  {
    title: '联系方式',
    dataIndex: 'phone',
    key: 'phone'
  },
  {
    title: '学历',
    dataIndex: 'education',
    key: 'education'
  },
  {
    title: '工作经验',
    dataIndex: 'experience',
    key: 'experience'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作',
    key: 'action',
    width: '200px'
  }
]

// 候选人数据
const candidateData = ref([
  { id: 1, name: '王小明', position: '前端开发工程师', phone: '13800138001', education: '本科', experience: '3年', status: 1 },
  { id: 2, name: '李小红', position: '产品经理', phone: '13800138002', education: '硕士', experience: '5年', status: 2 },
  { id: 3, name: '张小刚', position: '市场专员', phone: '13800138003', education: '本科', experience: '2年', status: 1 },
  { id: 4, name: '刘小丽', position: '会计', phone: '13800138004', education: '本科', experience: '4年', status: 3 }
])

const candidatePagination = ref({
  current: 1,
  pageSize: 10,
  total: 4
})

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    1: '招聘中',
    2: '部分完成',
    3: '已关闭'
  }
  return statusMap[status] || '未知'
}

// 获取候选人状态文本
const getCandidateStatusText = (status) => {
  const statusMap = {
    1: '简历筛选',
    2: '面试中',
    3: '已录用',
    4: '已拒绝'
  }
  return statusMap[status] || '未知'
}

// 获取候选人状态颜色
const getCandidateStatusColor = (status) => {
  const colorMap = {
    1: 'blue',
    2: 'orange',
    3: 'green',
    4: 'red'
  }
  return colorMap[status] || 'default'
}

// 查看职位
const viewPosition = (record) => {
  console.log('查看职位:', record)
}

// 编辑职位
const editPosition = (record) => {
  modalTitle.value = '编辑职位'
  positionFormState.value = {
    id: record.id,
    title: record.title,
    department: record.department,
    count: record.count,
    description: record.description || '',
    requirements: record.requirements || ''
  }
  positionModalVisible.value = true
}

// 确认关闭职位
const confirmClose = (record) => {
  Modal.confirm({
    title: '确认关闭职位',
    content: `确定要关闭职位"${record.title}"吗？关闭后将不再接收新简历。`,
    okText: '确认',
    cancelText: '取消',
    onOk() {
      handleClosePosition(record.id)
    }
  })
}

// 处理关闭职位
const handleClosePosition = (id) => {
  const index = positionData.value.findIndex(item => item.id === id)
  if (index !== -1) {
    positionData.value[index].status = 3
    message.success('职位已关闭')
  }
}

// 查看候选人
const viewCandidate = (record) => {
  console.log('查看候选人:', record)
}

// 安排面试
const scheduleInterview = (record) => {
  console.log('安排面试:', record)
}

// 候选人搜索
const handleCandidateSearch = () => {
  console.log('搜索候选人:', candidateSearch.value)
}

// 职位模态框相关
const positionModalVisible = ref(false)
const modalTitle = ref('发布职位')
const positionFormState = ref({
  id: null,
  title: '',
  department: '',
  count: 1,
  description: '',
  requirements: ''
})
const positionFormRules = {
  title: [{ required: true, message: '请输入职位名称' }],
  department: [{ required: true, message: '请选择所属部门' }],
  count: [{ required: true, message: '请输入招聘人数' }]
}

// 显示添加模态框
const showAddModal = () => {
  modalTitle.value = '发布职位'
  positionFormState.value = {
    id: null,
    title: '',
    department: '',
    count: 1,
    description: '',
    requirements: ''
  }
  positionModalVisible.value = true
}

// 提交职位表单
const handlePositionSubmit = () => {
  if (positionFormState.value.id) {
    // 编辑
    const index = positionData.value.findIndex(item => item.id === positionFormState.value.id)
    if (index !== -1) {
      positionData.value[index] = {
        ...positionData.value[index],
        title: positionFormState.value.title,
        department: positionFormState.value.department,
        count: positionFormState.value.count,
        description: positionFormState.value.description,
        requirements: positionFormState.value.requirements
      }
    }
    message.success('职位信息更新成功')
  } else {
    // 新增
    const newId = Math.max(...positionData.value.map(item => item.id)) + 1
    positionData.value.push({
      id: newId,
      title: positionFormState.value.title,
      department: positionFormState.value.department,
      count: positionFormState.value.count,
      hired: 0,
      publishDate: new Date().toISOString().split('T')[0],
      status: 1,
      description: positionFormState.value.description,
      requirements: positionFormState.value.requirements
    })
    message.success('职位发布成功')
  }
  positionModalVisible.value = false
}

// 取消职位表单
const handlePositionCancel = () => {
  positionModalVisible.value = false
}
</script>

<style scoped>
.recruitment-container {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
}
</style>